<template>
  <div class="property-panel">
    <div class="panel-header">
      <h3>属性配置</h3>
               <div class="component-info">
           <span class="component-name">{{ component.name || component.type }}</span>
           <span class="component-type">{{ component.type }}</span>
           <!-- 层级信息显示 -->
           <span class="component-layer">第{{ getComponentLayer() }}层</span>
           <small class="debug-info" v-if="debugMode">
             ID: {{ component.id }}<br>
             createdAt: {{ component.createdAt }}<br>
             updatedAt: {{ component.updatedAt }}
           </small>
         </div>
    </div>
    
    <div class="panel-content">
      <!-- 快速操作 -->
      <div class="quick-actions">
        <el-button-group>
          <el-button 
            size="small" 
            icon="el-icon-refresh-left"
            @click="resetAll"
            title="重置所有属性"
          >
            重置
          </el-button>
          <el-button 
            size="small" 
            icon="el-icon-copy-document"
            @click="copyComponent"
            title="复制组件"
          >
            复制
          </el-button>
          <el-button 
            size="small" 
            icon="el-icon-delete"
            type="danger"
            @click="handleDeleteComponent"
            title="删除组件"
          >
            删除
          </el-button>
        </el-button-group>
      </div>

      <!-- 属性配置 -->
      <div class="config-section">
        <div class="section-header">
          <h4>属性配置</h4>
          <el-button 
            size="small" 
            icon="el-icon-refresh"
            @click="resetProperties"
          >
            重置
          </el-button>
        </div>
        
        <div class="section-content">
          <template v-if="componentSchema && componentSchema.propSchema">
            <div 
              v-for="group in groupedProps"
              :key="group.name"
              class="property-group"
            >
              <div class="group-header">
                <span class="group-title">{{ group.title }}</span>
                <span class="group-count">({{ group.properties.length }})</span>
              </div>
              
              <div class="group-content">
                <div 
                  v-for="prop in group.properties"
                  :key="prop.key"
                  class="property-item"
                >
                  <label class="property-label">
                    {{ prop.label }}
                    <span v-if="prop.required" class="required">*</span>
                    <el-tooltip 
                      v-if="prop.description" 
                      :content="prop.description" 
                      placement="top"
                    >
                      <i class="el-icon-question"></i>
                    </el-tooltip>
                  </label>
                  
                  <!-- 动态属性编辑器 -->
                  <PropertyEditor
                    :property="prop"
                    :value="getPropertyValue(prop.key)"
                    @change="handlePropertyChange(prop.key, $event)"
                  />
                </div>
              </div>
            </div>
          </template>
          
          <!-- 默认属性 -->
          <div v-else class="default-properties">
            <div class="property-item">
              <label class="property-label">组件名称</label>
              <el-input
                v-model="component.name"
                placeholder="请输入组件名称"
                size="small"
                @change="handleNameChange"
              />
            </div>
            
            <div class="property-item">
              <label class="property-label">文本内容</label>
              <el-input
                v-model="component.props.text"
                placeholder="请输入文本内容"
                size="small"
                @change="handlePropertyChange('text', $event)"
              />
            </div>
          </div>
        </div>
      </div>
      
      <!-- 子元素管理 - 仅对容器组件显示 -->
      <div v-if="isContainerComponent" class="config-section">
        <div class="section-header">
          <h4>子元素管理</h4>
          <span class="section-subtitle">管理容器内的组件</span>
        </div>
        
        <div class="section-content">
          <div class="property-group">
            <div class="group-header">
              <span class="group-title">子组件列表</span>
              <span class="group-count">({{ containerChildren.length }})</span>
            </div>
            
            <div class="group-content">
              <div v-if="containerChildren.length === 0" class="empty-children">
                <el-empty description="暂无子组件" :image-size="60">
                  <span class="empty-tip">拖拽组件到容器内即可添加</span>
                </el-empty>
              </div>
              
              <div v-else class="children-list">
                <div 
                  v-for="(child, index) in containerChildren"
                  :key="child.id"
                  class="child-item"
                  :class="{ 'selected': selectedComponentId === child.id }"
                  @click="handleChildSelect(child)"
                >
                  <div class="child-info">
                    <div class="child-icon">
                      <i :class="getComponentIcon(child.type)"></i>
                    </div>
                    <div class="child-details">
                      <div class="child-name">{{ child.name || child.type }}</div>
                      <div class="child-type">{{ child.type }}</div>
                    </div>
                    <div class="child-index">#{{ index + 1 }}</div>
                  </div>
                  
                  <div class="child-actions">
                    <el-button
                      size="mini"
                      type="danger"
                      icon="el-icon-delete"
                      @click.stop="handleChildDelete(child)"
                      title="删除子组件"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 样式配置 -->
      <div class="config-section">
        <div class="section-header">
          <h4>样式配置</h4>
          <el-button 
            size="small" 
            icon="el-icon-refresh"
            @click="resetStyles"
          >
            重置
          </el-button>
        </div>
        
        <div class="section-content">
          <template v-if="componentSchema && componentSchema.styleSchema">
            <div 
              v-for="group in groupedStyles"
              :key="group.name"
              class="property-group"
            >
              <div class="group-header">
                <span class="group-title">{{ group.title }}</span>
                <span class="group-count">({{ group.properties.length }})</span>
              </div>
              
              <div class="group-content">
                <div 
                  v-for="style in group.properties"
                  :key="style.key"
                  class="property-item"
                >
                  <label class="property-label">
                    {{ style.label }}
                    <el-tooltip 
                      v-if="style.description" 
                      :content="style.description" 
                      placement="top"
                    >
                      <i class="el-icon-question"></i>
                    </el-tooltip>
                  </label>
                  
                  <!-- 动态样式编辑器 -->
                  <PropertyEditor
                    :property="style"
                    :value="getStyleValue(style.key)"
                    @change="handleStyleChange(style.key, $event)"
                  />
                </div>
              </div>
            </div>
          </template>
          
          <!-- 默认样式 -->
          <div v-else class="default-styles">
            <div class="property-item">
              <label class="property-label">字体大小</label>
              <el-input-number
                v-model="component.style.fontSize"
                :min="8"
                :max="72"
                :step="1"
                size="small"
                @change="handleStyleChange('fontSize', $event)"
              />
            </div>
            
            <div class="property-item">
              <label class="property-label">字体颜色</label>
              <el-color-picker
                v-model="component.style.color"
                size="small"
                @change="handleStyleChange('color', $event)"
              />
            </div>
            
            <div class="property-item">
              <label class="property-label">背景颜色</label>
              <el-color-picker
                v-model="component.style.backgroundColor"
                size="small"
                @change="handleStyleChange('backgroundColor', $event)"
              />
            </div>
            
            <div class="property-item">
              <label class="property-label">内边距</label>
              <el-input-number
                v-model="component.style.padding"
                :min="0"
                :max="100"
                :step="1"
                size="small"
                @change="handleStyleChange('padding', $event)"
              />
            </div>
            
            <div class="property-item">
              <label class="property-label">外边距</label>
              <el-input-number
                v-model="component.style.margin"
                :min="0"
                :max="100"
                :step="1"
                size="small"
                @change="handleStyleChange('margin', $event)"
              />
            </div>
          </div>
          
        </div>
      </div>
      
      <!-- 自定义样式代码输入框 - 始终显示 -->
      <div class="config-section">
        <div class="section-header">
          <h4>自定义样式</h4>
        </div>
        
        <div class="section-content">
          <div class="property-group">
            <div class="group-header">
              <span class="group-title">自定义样式代码</span>
              <span class="group-count">(高级)</span>
            </div>
            
            <div class="group-content">
              <div class="property-item">
                <label class="property-label">
                  自定义样式代码
                  <el-tooltip content="输入自定义CSS样式代码，支持所有CSS属性" placement="top">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </label>
                <el-input
                  v-model="component.style.customCSS"
                  type="textarea"
                  :rows="4"
                  placeholder="输入CSS样式代码，例如：&#10;border: 2px solid #409eff;&#10;border-radius: 8px;&#10;box-shadow: 0 2px 8px rgba(0,0,0,0.1);"
                  size="small"
                  @input="handleCustomCSSChange"
                  @blur="applyCustomCSS"
                />
                <div class="custom-css-actions">
                  <el-button 
                    size="small" 
                    type="primary" 
                    @click="applyCustomCSS"
                  >
                    应用样式
                  </el-button>
                  <el-button 
                    size="small" 
                    @click="clearCustomCSS"
                  >
                    清空
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 高级配置 -->
      <div class="config-section">
        <div class="section-header">
          <h4>高级配置</h4>
        </div>
        
        <div class="section-content">
          <div class="property-item">
            <label class="property-label">组件ID</label>
            <el-input
              v-model="component.id"
              placeholder="组件唯一标识"
              size="small"
              disabled
            />
          </div>
          
          <div class="property-item">
            <label class="property-label">组件类型</label>
            <el-input
              v-model="component.type"
              placeholder="组件类型"
              size="small"
              disabled
            />
          </div>
          
          <div class="property-item">
            <label class="property-label">创建时间</label>
            <el-input
              :value="formatTime(component.createdAt)"
              placeholder="创建时间"
              size="small"
              disabled
            />
            <small class="property-description">
              原始值: {{ component.createdAt || '未设置' }}
            </small>
          </div>
          
          <div class="property-item">
            <label class="property-label">最后修改</label>
            <el-input
              :value="formatTime(component.updatedAt)"
              placeholder="最后修改时间"
              size="small"
              disabled
            />
            <small class="property-description">
              原始值: {{ component.updatedAt || '未设置' }}
            </small>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, inject, ref } from 'vue'
import PropertyEditor from './PropertyEditor.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { widgetCategories } from '@/components/widgets'

// Props
const props = defineProps({
  component: {
    type: Object,
    required: true
  }
})

// Emits
const emit = defineEmits(['property-update', 'delete', 'copy'])

// 注入的依赖
const designerStore = inject('designerStore')

// 调试模式
const debugMode = ref(true) // 临时设置为 true 来调试时间字段

// 计算属性
const componentSchema = computed(() => {
  // 从 widgetCategories 中查找组件配置
  for (const [categoryName, widgets] of Object.entries(widgetCategories)) {
    const widget = widgets.find(w => w.type === props.component.type)
    if (widget) {
      return widget
    }
  }
  return null
})

// 分组属性
const groupedProps = computed(() => {
  if (!componentSchema.value?.propSchema) return []
  
  const groups = {}
  componentSchema.value.propSchema.forEach(prop => {
    const group = prop.group || '基础'
    if (!groups[group]) {
      groups[group] = {
        name: group,
        title: group,
        properties: []
      }
    }
    groups[group].properties.push(prop)
  })
  
  return Object.values(groups)
})

// 分组样式
const groupedStyles = computed(() => {
  if (!componentSchema.value?.styleSchema) return []
  
  const groups = {}
  componentSchema.value.styleSchema.forEach(style => {
    const group = style.group || '布局'
    if (!groups[group]) {
      groups[group] = {
        name: group,
        title: group,
        properties: []
      }
    }
    groups[group].properties.push(style)
  })
  
  return Object.values(groups)
})

// 容器组件相关计算属性
const isContainerComponent = computed(() => {
  // 检查当前组件是否为容器组件
  return props.component.children && Array.isArray(props.component.children)
})

const containerChildren = computed(() => {
  if (!isContainerComponent.value) return []
  return props.component.children || []
})

// 获取当前选中的组件ID
const selectedComponentId = computed(() => {
  return designerStore?.selectionState?.selectedComponent?.id || null
})

// 获取组件层级
const getComponentLayer = () => {
  // 通过DOM结构计算层级
  if (typeof window !== 'undefined') {
    const element = document.querySelector(`[data-component-id="${props.component.id}"]`)
    if (element) {
      let layer = 1
      let parent = element.parentElement
      
      // 向上查找，直到找到画布容器
      while (parent && !parent.classList.contains('canvas-content')) {
        if (parent.classList.contains('component-renderer')) {
          layer++
        }
        parent = parent.parentElement
      }
      
      return layer
    }
  }
  
  // 备用方案：通过组件数据结构计算
  let layer = 1
  let currentComponent = props.component
  
  // 查找父组件
  if (designerStore && designerStore.currentPage) {
    const findParentComponent = (components, targetId) => {
      for (const comp of components) {
        if (comp.children && comp.children.some(child => child.id === targetId)) {
          return comp
        }
        if (comp.children) {
          const found = findParentComponent(comp.children, targetId)
          if (found) return found
        }
      }
      return null
    }
    
    const parent = findParentComponent(designerStore.currentPage.components, currentComponent.id)
    if (parent) {
      layer = 2 // 至少是第2层
    }
  }
  
  return layer
}

// 方法
const getPropertyValue = (key) => {
  return props.component.props?.[key] ?? (componentSchema.value?.defaultProps?.[key])
}

const getStyleValue = (key) => {
  // 对于customCSS属性，优先使用组件自身的值，如果没有则使用默认值
  if (key === 'customCSS') {
    return props.component.style?.[key] ?? ''
  }
  return props.component.style?.[key] ?? (componentSchema.value?.defaultStyle?.[key])
}

const handlePropertyChange = (key, value) => {
  emit('property-update', props.component.id, `props.${key}`, value)
}

const handleNameChange = (value) => {
  emit('property-update', props.component.id, 'name', value)
}

const resetProperties = () => {
  if (componentSchema.value?.defaultProps) {
    Object.keys(componentSchema.value.defaultProps).forEach(key => {
      handlePropertyChange(key, componentSchema.value.defaultProps[key])
    })
  }
}

const resetStyles = () => {
  if (componentSchema.value?.defaultStyle) {
    Object.keys(componentSchema.value.defaultStyle).forEach(key => {
      handleStyleChange(key, componentSchema.value.defaultStyle[key])
    })
  }
}

const resetAll = () => {
  // 重置所有属性的确认对话框
  ElMessageBox.confirm(
    '确定要重置所有属性和样式到默认值吗？',
    '重置确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info'
    }
  ).then(() => {
    resetProperties()
    resetStyles()
    ElMessage.success('所有属性已重置到默认值')
  }).catch(() => {
    // 用户取消重置操作
  })
}

const copyComponent = () => {
  emit('copy', props.component.id)
}

const handleDeleteComponent = () => {
  // 删除组件的确认对话框
  ElMessageBox.confirm(
    `确定要删除组件 "${props.component.name || props.component.type}" 吗？`,
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 用户确认删除，触发删除事件
    emit('delete', props.component.id)
    ElMessage.success('组件删除成功')
  }).catch(() => {
    // 用户取消删除，不做任何操作
  })
}

const formatTime = (timestamp) => {
  if (!timestamp) return '未知'
  
  try {
    // 如果是数字时间戳，转换为日期
    if (typeof timestamp === 'number') {
      return new Date(timestamp).toLocaleString('zh-CN')
    }
    
    // 如果是字符串时间，直接解析
    if (typeof timestamp === 'string') {
      const date = new Date(timestamp)
      if (isNaN(date.getTime())) {
        return '时间格式错误'
      }
      return date.toLocaleString('zh-CN')
    }
    
    return '未知格式'
  } catch (error) {
    console.error('时间格式化错误:', error, '原始值:', timestamp)
    return '格式化错误'
  }
}

// 自定义CSS相关方法
const handleCustomCSSChange = (value) => {
  // 实时更新组件样式
  if (props.component.style) {
    props.component.style.customCSS = value
  }
}

const applyCustomCSS = () => {
  const customCSS = props.component.style?.customCSS
  if (customCSS) {
    try {
      // 解析CSS代码并应用到组件
      const cssRules = parseCustomCSS(customCSS)
      Object.assign(props.component.style, cssRules)
      
      // 触发样式更新
      emit('property-update', props.component.id, 'style', props.component.style)
      
      // 显示成功提示
      ElMessage.success('自定义样式应用成功')
    } catch (error) {
      ElMessage.error('CSS语法错误，请检查代码格式')
      console.error('CSS解析错误:', error)
    }
  }
}

const clearCustomCSS = () => {
  // 清空自定义CSS的确认对话框
  ElMessageBox.confirm(
    '确定要清空所有自定义样式吗？此操作不可恢复。',
    '清空确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    if (props.component.style) {
      props.component.style.customCSS = ''
      // 清除可能存在的自定义样式属性
      const defaultStyle = componentSchema.value?.defaultStyle || {}
      Object.keys(props.component.style).forEach(key => {
        if (!defaultStyle.hasOwnProperty(key) && key !== 'customCSS') {
          delete props.component.style[key]
        }
      })
      emit('property-update', props.component.id, 'style', props.component.style)
      ElMessage.success('自定义样式已清空')
    }
  }).catch(() => {
    // 用户取消清空操作
  })
}

// 子元素管理相关方法
const handleChildSelect = (child) => {
  // 选中子组件
  if (designerStore && designerStore.selectComponent) {
    designerStore.selectComponent(child)
  }
}

const handleChildDelete = (child) => {
  // 删除子组件的确认对话框
  ElMessageBox.confirm(
    `确定要删除子组件 "${child.name || child.type}" 吗？`,
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 从父容器的children数组中移除该子组件
    if (props.component.children) {
      const index = props.component.children.findIndex(c => c.id === child.id)
      if (index > -1) {
        props.component.children.splice(index, 1)
        // 触发更新事件
        emit('property-update', props.component.id, 'children', props.component.children)
        ElMessage.success('子组件删除成功')
      }
    }
  }).catch(() => {
    // 用户取消删除
  })
}

const getComponentIcon = (componentType) => {
  // 根据组件类型返回对应的图标类名
  const iconMap = {
    'container': 'el-icon-folder',
    'text': 'el-icon-document',
    'image': 'el-icon-picture',
    'button': 'el-icon-thumb',
    'input': 'el-icon-edit',
    'select': 'el-icon-arrow-down',
    'checkbox': 'el-icon-check',
    'radio': 'el-icon-circle-check',
    'table': 'el-icon-s-grid',
    'chart': 'el-icon-pie-chart',
    'form': 'el-icon-document-copy'
  }
  return iconMap[componentType] || 'el-icon-document'
}

// 解析自定义CSS代码
const parseCustomCSS = (cssText) => {
  const styles = {}
  const lines = cssText.split('\n')
  
  lines.forEach(line => {
    line = line.trim()
    if (line && !line.startsWith('/*') && !line.startsWith('//')) {
      const colonIndex = line.indexOf(':')
      if (colonIndex > 0) {
        const property = line.substring(0, colonIndex).trim()
        const value = line.substring(colonIndex + 1).trim().replace(/;$/, '')
        if (property && value) {
          // 转换CSS属性名为驼峰命名
          const camelCaseProperty = property.replace(/-([a-z])/g, (g) => g[1].toUpperCase())
          styles[camelCaseProperty] = value
        }
      }
    }
  })
  
  return styles
}
</script>

<style scoped>
.property-panel {
  width: 320px;
  background: white;
  border-left: 1px solid #e4e7ed;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.panel-header {
  padding: 16px;
  border-bottom: 1px solid #e4e7ed;
  background: #fafafa;
}

.panel-header h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.component-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.component-name {
  font-size: 14px;
  font-weight: 500;
  color: #606266;
}

.component-type {
  font-size: 12px;
  color: #909399;
  background: #f0f9ff;
  color: #409eff;
  padding: 2px 8px;
  border-radius: 10px;
  display: inline-block;
  width: fit-content;
}

.component-layer {
  font-size: 11px;
  color: #67c23a;
  background: #f0f9ff;
  padding: 2px 6px;
  border-radius: 8px;
  display: inline-block;
  width: fit-content;
  border: 1px solid #67c23a;
}

.debug-info {
  font-size: 10px;
  color: #909399;
  background: #f5f5f5;
  padding: 4px 8px;
  border-radius: 4px;
  margin-top: 4px;
  display: block;
  font-family: monospace;
  line-height: 1.4;
}

.panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.quick-actions {
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
}

.config-section {
  margin-bottom: 24px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #606266;
}

.section-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.property-group {
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  overflow: hidden;
}

.group-header {
  background: #f5f7fa;
  padding: 8px 12px;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  gap: 8px;
}

.group-title {
  font-size: 12px;
  font-weight: 500;
  color: #606266;
}

.group-count {
  font-size: 11px;
  color: #909399;
  background: #e4e7ed;
  padding: 2px 6px;
  border-radius: 8px;
}

.group-content {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.property-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.property-label {
  font-size: 12px;
  font-weight: 500;
  color: #606266;
  display: flex;
  align-items: center;
  gap: 4px;
}

.required {
  color: #f56c6c;
  font-weight: bold;
}

.el-icon-question {
  color: #909399;
  cursor: help;
  font-size: 12px;
}

.default-properties,
.default-styles {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 自定义CSS样式 */
.custom-css-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.custom-css-actions .el-button {
  flex: 1;
  font-size: 12px;
}

/* 自定义CSS输入框样式 */
.property-item .el-textarea {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
  line-height: 1.4;
}

.property-item .el-textarea .el-textarea__inner {
  background-color: #f8f9fa;
  border-color: #dcdfe6;
  transition: all 0.3s ease;
}

.property-item .el-textarea .el-textarea__inner:focus {
  background-color: #ffffff;
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

/* 滚动条样式 */
.panel-content::-webkit-scrollbar {
  width: 6px;
}

.panel-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.panel-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.panel-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 子元素管理样式 */
.section-subtitle {
  font-size: 12px;
  color: #909399;
  font-weight: normal;
  margin-left: 8px;
}

.empty-children {
  padding: 20px 0;
  text-align: center;
}

.empty-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 8px;
  display: block;
}

.children-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.child-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: #f8f9fa;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.child-item:hover {
  background: #f0f9ff;
  border-color: #409eff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}

.child-item.selected {
  background: #e6f7ff;
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.child-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.child-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #409eff;
  color: white;
  border-radius: 4px;
  font-size: 12px;
}

.child-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.child-name {
  font-size: 13px;
  font-weight: 500;
  color: #303133;
  line-height: 1.2;
}

.child-type {
  font-size: 11px;
  color: #909399;
  background: #f0f0f0;
  padding: 2px 6px;
  border-radius: 10px;
  display: inline-block;
  width: fit-content;
}

.child-index {
  font-size: 11px;
  color: #909399;
  background: #e4e7ed;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 24px;
  text-align: center;
}

.child-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.child-item:hover .child-actions {
  opacity: 1;
}

.child-actions .el-button {
  padding: 4px 6px;
  font-size: 10px;
}

/* 响应式设计 - 保持固定宽度 */
@media (max-width: 1200px) {
  .property-panel {
    width: 280px; /* 保持固定宽度 */
    height: auto;
    border-left: 1px solid #e4e7ed; /* 保持左边框 */
    border-top: none; /* 移除顶部边框 */
  }
  
  .panel-content {
    max-height: none; /* 移除高度限制 */
  }
}
</style>
